<template>
    <div>
        <el-button type="text" @click="showSelectBox">添加S3</el-button>
        <el-table v-if="checkS3s.length > 0" :data="checkS3s" class="code-detail-table"
            header-row-class-name="code-detail-table-header">
            <el-table-column prop="s3_name" label="名称" />
            <el-table-column prop="s3_id" label="桶" />
            <el-table-column prop="path" label="路径" />
            <el-table-column prop="name" label="挂载地址" />
            <el-table-column prop="path" label="操作">
                <template slot-scope="{ row }">
                    <!--<el-button type="text" @click="put(row)">修改</el-button>-->
                    <el-button type="text" @click="removetag(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="showSelectDialog" title="添加S3" @onClose="onClose" width="640px">
            <div class="detail-layout">
                <el-form class="form myself-form alick-add-form" ref="form" :model="addForm" :rules="submitRules"
                    label-width="120px">
                    <el-form-item label="名称" prop="s3_name">
                        <el-input type="text" v-model="addForm.s3_name" />
                    </el-form-item>
                    <el-form-item label="桶" prop="s3_id">
                        <el-select v-model="addForm.s3_id">
                            <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="路径" prop="path">
                        <el-input type="text" v-model="addForm.path" />
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="none-type" @click="onClose">取消</el-button>
                <el-button type="primary" @click="surebtn">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import { getAllAssetS3 } from '@/api/inout'
export default {
    name: 'plugInS3',
    data() {
        return {
            showSelectDialog: false,
            s3Options: [],
            checkS3s: [],
            addForm: {
            },
            submitRules: {
                s3Name: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
                ],
                s3_id: [
                    { required: true, message: "该项为必填项" },
                ],
                path: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 255, message: "长度在1到255个字符" },
                ],
            }
        }
    },
    props: ["s3_list"],
    watch: {
        s3_list(val) {
            console.log(val)
            this.checkS3s = val.map(e => e.s3_list || e)
            console.log(this.checkS3s)
        }
    },
    methods: {
        surebtn() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let index
                    for (index in this.checkS3s) {
                        //console.log("index", index)
                        let item = this.checkS3s[index]
                        //console.log("item", item)
                        console.log("this.addForm.name", this.addForm.s3_name)
                        if (item.name == this.addForm.s3_name) {
                            alert("名称已经存在")
                            return
                        }
                    }
                    const data = JSON.parse(JSON.stringify(this.addForm));
                    this.checkS3s.push(data)
                    this.$emit('infoS3', this.checkS3s)
                    this.showSelectDialog = false;
                    this.$emit('onClose', false)
                }
            })
        },

        async getS3s() {
            let res = await getAllAssetS3({});
            this.s3Options = res.data
        },
        removetag(index) {
            this.checkS3s.splice(index, 1);
            this.checkS3s = JSON.parse(JSON.stringify(this.checkS3s))
            console.log(this.checkS3s)
            this.$emit('infoS3', this.checkS3s)
        },
        showSelectBox() {
            this.showSelectDialog = true;
            this.addForm = {}
        },
        onClose() {
            this.showSelectDialog = false;
            this.$emit('onClose', false)
        },
        initCheckS3s() {
            if (!this.s3_list) return
            this.checkS3s = this.s3_list
        },
    },
    mounted() {
        this.getS3s()
        this.initCheckS3s()
        console.log('cc')
    },
    destroyed() {

    }
}
</script>

<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>
